<template>
    <div class="box_center">
        <el-button @click="tocustom">自定义</el-button>
        <el-card shadow="hover">
            <template #header>
                <div style="display: flex;justify-content: end">
                    <el-button type="primary" @click="addRow">新 增</el-button>
                </div>
            </template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    class="top"
            >

                <el-table-column prop="name" label="名称" align="center"/>
                <el-table-column prop="date" label="日期" align="center"/>
                <el-table-column prop="money" label="金额" align="center"/>
                <el-table-column prop="code" label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="addRow(scope.row)">详 情</el-button>
                        <el-button type="primary" @click="copyText(scope.row.money)">复 制</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <vue3-seamless-scroll class="seamless-warp scroll" direction="down" :limitScrollNum="6" :hover="true"
                                  :list="tableData" :step="0.3" style="width: 100%">
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        class="bottom">

                    <el-table-column prop="name" label="名称" align="center"/>
                    <el-table-column prop="date" label="日期" align="center"/>
                    <el-table-column prop="money" label="金额" align="center"/>
                    <el-table-column prop="code" label="操作" align="center">
                        <template #default>
                            <el-button type="primary" @click="addRow">详 情</el-button>
                            <el-button type="primary" @click="copyText">复 制</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </vue3-seamless-scroll>
        </el-card>
        <addRef ref="addRoleRef"/>
        <el-tabs type="border-card">
            <el-tab-pane label="User">
                <div class="HelloWorld">
                    <div style="border: 2px solid #e6e6e6; background-color: white">
                        <vue-esign
                                ref="esignRef"
                                :width="800"
                                :height="300"
                                :isCrop="isCrop"
                                :lineWidth="lineWidth"
                                :lineColor="lineColor"
                                :bgColor.sync="bgColor"
                        />
                    </div>
                    <button @click="handleReset">清空画板</button>
                    <button @click="handleGenerate">生成图片</button>
                    电子签名：
                    <img
                            :src="resultImg"
                            alt=""
                            :style="resultImg !== null ? 'width: 100px; height: 70px' : ''"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="Config">Config</el-tab-pane>
            <el-tab-pane label="Role">Role</el-tab-pane>
            <el-tab-pane label="Task">Task</el-tab-pane>
        </el-tabs>



        <DiffTable :data-group="[oldData, newData]" :columns="tableColumns" />
    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive, onMounted, toRefs, computed, ref, nextTick} from 'vue'
    import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
    import addRef from './moment/addRow.vue'
    import DiffTable from './moment/DiffTable.vue';
    import { ElMessage } from 'element-plus'
    export default defineComponent({
        components: {Vue3SeamlessScroll, addRef,DiffTable},
        setup() {
            const addRoleRef = ref()
            const esignRef = ref() as any
            const state: any = reactive({
                tableData: [],
                actives: 0,
                lineWidth: 6,
                lineColor: 'red',
                bgColor: '',
                resultImg: '',
                isCrop: false,
                oldData:[],
                newData:[],
                tableColumns:[]
            })
            const  handleReset = async () => {
                await nextTick(() => {
                    esignRef.value.reset()
                    state.resultImg= ''
                })
            }
            const handleGenerate =()=>{
                console.log(esignRef);
                esignRef.value.generate().then((res:any)=>{
                    state.resultImg = res
                })
            }
            const tocustom =()=>{

            }
            const tableRowClassName = ({row, rowIndex}: any) => {
                if (rowIndex == 1) {
                    return 'warning-row'
                } else if (rowIndex == 3) {
                    return 'success-row'
                }
                return ''
            }
            // const optionHover = computed(()=>{
            //     return{
            //         hoverStop: true
            //     }
            // })
            const addRow = (row) => {
                console.log(row)
                addRoleRef.value.openDialog(row);
            }
            onMounted(() => {
                state.tableData = [
                    {
                        date: '2022-05-03',
                        name: '名称名称',
                        money: 200333,
                    },
                    {
                        date: '2022-05-02',
                        name: '名称名称',
                        money: 190333,
                    },
                    {
                        date: '2022-05-04',
                        name: '名称名称',
                        money: 220333,
                    },
                    {
                        date: '2022-05-01',
                        name: '名称名称',
                        money: 310333,
                    },
                    {
                        date: '2022-05-04',
                        name: '名称名称',
                        money: 220333,
                    },
                ]

                setTimeout(() => {
                    state.tableData.push(
                        {
                            date: '新增数据first',
                            name: '张三',
                            money: 310333,
                        },
                        {
                            date: '新增数据sceecd',
                            name: '李四',
                            money: 220333,
                        },
                        {
                            date: '2022-05-01third',
                            name: '王五',
                            money: 310333,
                        },
                    )
                }, 5000),
                    state.oldData=[
                        { id: 1, name: "zhangsan1", age: 23, address: "zxczxczxc" },
                        { id: 2, name: "zhangsan2", age: 23.5, address: "zxczxczxc" },
                        { id: 3, name: "zhangsan34", age: 23, address: "zxczxczxc" },
                        { id: 4, name: "zhangsan4", age: 23, address: "zxczxczxc" },
                        { id: 5, name: "zhangsan5", age: 23, address: "zxczxczxc" },
                        { id: 6, name: "zhangsan5", age: 23, address: "zxczxczxc" }
                    ];
                state.newData = [
                    { id: 1, name: "zhangsan1", age: 23, address: "zxczxczxc" },
                    { id: 2, name: "zhangsan2", age: 23, address: "zxczxczxc" },
                    { id: 3, name: "zhangsan4", age: 23, address: "地址地址地址",
                        children: [{
                            id: 31,
                            age: 23,
                            name: '张三',
                            address: "zxczxczxc"
                        }, {
                            id: 32,
                            age: 23,
                            name: '李四',
                            address: "zxczxczxc"
                        }, {
                            id: 33,
                            age: 23,
                            name: '王五',
                            address: "zxczxczxc"
                        }]
                    },
                    { id: 4, name: "zhangsan3", age: 23, address: "zxczxczxc" },
                    { id: 5, name: "zhangsan5", age: 23, address: "zxczxczxc" },
                    { id: 6, name: "zhangsan5", age: 23, address: "zxczxczxc" },
                    { id: 7, name: "zhangsan5", age: 23, address: "zxczxczxc" }
                ];
                state.tableColumns= [
                    { label: "唯一id", prop: "id",
                        children:[
                            {
                                label: "我是第一", prop: "id"
                            }
                        ]
                    },
                    { label: "名称", prop: "name" },
                    { label: "年龄", prop: "age" },
                    { label: "地址", prop: "address" }
                ]
            })
            const  copyText=(row)=>{
                debugger
                const text = document.createElement('input'); // 创建节点
                text.setAttribute('readonly', 'readonly');
                text.value = row; // 赋值
                document.body.appendChild(text); // 插入节点
                text.setSelectionRange(0, text.value.length);
                text.select(); // 选中节点
                document.execCommand('copy'); // 执行浏览器复制方法
                if (document.body.removeChild(text)) {
                    ElMessage({ type: 'success', message: '复制成功' })
                } else {
                    ElMessage({ type: 'error', message: '复制失败' })
                }
            }

            return {
                copyText,
                handleReset,
                handleGenerate,
                addRoleRef,
                esignRef,
                addRow,
                tableRowClassName,
                ...toRefs(state),
            }
        },
    })
</script>

<style scoped lang="scss">
    .box_center {
        width: 1200px;
        height: 500px;
        margin: 0 auto;
        padding: 50px;
    }

    ::v-deep .seamless-warp {
        height: 229px;
        overflow: hidden;
    }

    ::v-deep .top .el-table__body-wrapper {
        display: none;
    }

    ::v-deep .bottom .el-table__header-wrapper {
        display: none;
        width: 100%;
    }

    ::v-deep .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }

    ::v-deep .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
</style>
